import React,{useState} from 'react'
import {
  HomeOutlined,
  SyncOutlined,
  UserOutlined
} from '@ant-design/icons';
import './AccountSettings.scss'
import { Image, Input, Avatar, Button } from 'antd';


export default function Accountsettings() {

  const [image,setimage] = useState("https://img0.baidu.com/it/u=3004491844,2733159093&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500")

  const [num,setnum] = useState('admin')

  return (
    <div className='AccountSettings'>

      <div className='AccountSetting'>
        <div className='icon'>
          <HomeOutlined className='home' />
          <p>首页 / 系统管理 / 账户设置</p>
        </div>

        <div className='refresh'>
          <a href="">
            <Button type="default" shape="round" icon={<SyncOutlined />} size='large'>
              刷新
            </Button>
          </a>
        </div>
      </div>

      <div className='AccountSetting-body' >
        <div className='AccountSetting-body-title'>
          账户设置
        </div>

        <div className='AccountSetting-body-content'>
          <Avatar size={150} icon={<UserOutlined />}
            src={
              <Image
                src={image}
              />
            }
          />

          <a className='a'> 上传头像 </a>

          <div className='AccountSetting-body-information'>
            <label className='AccountSetting-body-inp'> <span required ><span className='xing'> * </span>用户名：</span > <Input value={num} /></label>
            <label className='AccountSetting-body-inp'> <span required ><span className='xing'> * </span>手机号：</span > <Input value={1187084869} /></label>
            <label className='AccountSetting-body-inp'> <span required ><span className='xing'> * </span>Email：</span > <Input value={'1187084869@qq.com'} /></label>
            <label className='AccountSetting-body-inp'> <span required ><span className='xing'> * </span>旧密码：</span > <Input /></label>
            <label className='AccountSetting-body-inp'> <span required ><span className='xing'> * </span>新密码：</span > <Input /></label>
            <label className='AccountSetting-body-inp'> <span required ><span className='xing'> *</span>确认密码：</span > <Input /></label>
          </div>

          <div>
            <Button type="default" size='large'>
              提交
            </Button>
          </div>
        </div>
      </div>


    </div>
  )
}
